<!--斗地主的导航栏-->
<template>
  <div class="margin-box1">
    <div class="option" v-for="(item,index) in options" :key="'navigation'+index"
      :class="item.active?'option-active':'option'"
         @click="optionClick(index)"
    >{{item.title}}</div>
  </div>
</template>

<script>
export default {
  name: "LandlordNavigation",
  props:{
    selected:{type: Number}
  },
  watch:{
    selected(newValue, oldValue){
      if(newValue==oldValue){return;}
      this.optionActive(newValue);
    }
  },
  data(){
    return{
      currentOption:null,
      options:[
        {title:"搜索游戏",active:true},
        {title: "创建房间", active: false}
      ]
    }
  },
  beforeMount() {
    this.currentOption=this.options[0];
  },
  methods:{
    optionActive(index){
      this.currentOption.active=false;
      this.options[index].active=true;
      this.currentOption=this.options[index];
    },
    optionClick(index){
      this.$emit('changeView', index);
    }
  },
}
</script>

<style scoped>
.margin-box1{
  width: 14vw;
  height: 100vh;
  background: #0077ff;
  display: inline-block;
}
.option{
  cursor: pointer;
}
.option-active{
  background: #d79303;
}
</style>